// src/directives/vHoverShow.ts
import type { Directive } from 'vue'

export const vHoverShow: Directive<HTMLElement, string> = {
  mounted(el, binding) {
    const targetSel = binding.value       // 选择器字符串
    let tryCount = 0
    const maxTries = 10
    console.log(5555);

    const init = () => {
      const target = document.querySelector(targetSel) as HTMLElement | null
      if (target) {
        const show = () => (target.style.display = '')
        const hide = () => (target.style.display = 'none')
        hide()                         // 初始隐藏
        el.addEventListener('mouseenter', show)
        el.addEventListener('mouseleave', hide)
        return
      }
      if (++tryCount < maxTries) {
        setTimeout(init, 50)         // 再等 50ms
      }
    }

    init()
  },
}